<template>
    <div class="unentered-equipment">
        <div>
            <el-select filterable v-model="organizationId" @change="orgChange" placeholder="请选择业主单位">
                <el-option
                    v-for="item in orgList"
                    :key="item.organizationId"
                    :label="item.shortName"
                    :value="item.organizationId">
                </el-option>
            </el-select>
            <div class="unentered-equipment-list">
                <div class="unentered-equipment-null" v-if="total == 0">
                    暂无数据
                </div>
                <div v-else v-loading="loading">
                    <div v-for="(item,index) in tableData" :key="index" class="unentered-equipment-box">
                        <div class="unentered-equipment-unit">
                            <div>设备：{{item.name}}</div>
                            <div>所属单位：{{item.orgName}}</div>
                        </div>
                        <el-button class="unentered-equipment-btn" @click="unenteredEquipmentBtn(item)" type="primary">录入</el-button>
                    </div>
                </div>
                <el-pagination
                    class="unentered-equipment-number"
                    background
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 50, 100]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { getOrgList } from '@/api/org'
import { noenterDevice } from '@/api/fcf'
export default {
    props: {
      unenteredEquipment: {
        type: Function
      },
      addFcfacilities:{
          type:Function
      }
    },
    data(){
        return{
            organizationId:'',
            orgList:[],
            tableData: [],
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            loading:false
        }
    },
    created(){
        // 获取单位
        this.getUnitList()
    },
    methods:{
        // 获取单位列表
        getUnitList(){
            let _this = this
            // 获取业主单位信息
            getOrgList({
                queryType: 0
            }).then(res => {
                if(res.status = 200) {
                    _this.orgList = res.data
                    // 初始选中第一个单位
                    _this.organizationId = res.data[0].organizationId
                    _this.organizationName = res.data[0].shortName
                    // 获取未录入设备列表
                    _this.noenterDeviceList()
                }
            })
        },
        // 单位change事件
        orgChange(){
            this.noenterDeviceList()
        },
        // 获取未录入设备列表
        noenterDeviceList(pageIndex, pageSize){
            let _this = this
            if (pageIndex) {
                _this.currentPage = pageIndex
            }
            if (pageSize) {
                _this.pageSize = pageSize
            }
            _this.loading = true
            noenterDevice({
                queryType:1,
                orgId:_this.organizationId,
                pageIndex : _this.currentPage - 1,
                pageSize : _this.pageSize,
            }).then(res => {
                if(res.status == 200){
                    _this.loading = false
                    _this.tableData = res.data
                    _this.total = res.total
                }
            })
        },
        handleSizeChange(pageSize) {
            this.noenterDeviceList(this.currentPage, pageSize)
        },
        handleCurrentChange(currentPage) {
            this.noenterDeviceList(currentPage, this.pageSize)
        },
        // 录入
        unenteredEquipmentBtn(item){
            let _this = this
            if (_this.unenteredEquipment) {
                _this.unenteredEquipment();
            }
            if(_this.addFcfacilities){
                _this.addFcfacilities()
            }
            _this.$emit('child-event',item)
        }
    }
}
</script>
<style scoped>
.unentered-equipment{
    padding:10px 20px;
    height: 100%;
    color: #666;
}
.unentered-equipment-box{
    padding: 10px;
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    height: 90px;
    border-bottom: 1px solid #eee;
    align-items: center;
}
.unentered-equipment-unit div:nth-child(2){
    margin-top: 10px;
}
.unentered-equipment-btn{
    height: 40px;
}
.unentered-equipment-null{
    text-align: center;
    margin: 20px 0;
}
.unentered-equipment-list{
    overflow-y: auto;
    height: calc(100vh - 200px);
}
.unentered-equipment-number{
    position: fixed;

    bottom: 10px;
}
</style>